Skip to content

js-03 条件、循环、语句

一、if语法

  1. 在JS当中最常用的语句就是条件和循环了 ;
  2. 当满足此条件时才执行的语句;
  3. if基本使用

(1)if(条件){}

当条件满足时执行,if当中只有1条语句时就可以省略花括号,语句直接紧挨着条件;

js
if(true) console.log('成立')  // 如果if不满足则不走该条语句
console.log('...')

(2)if(){}else{};

小括号写条件,花括号写满足条件与不满足的条件;

开关定义:在if外面声明一个flag=true,在if里面执行第一条改变变量为false,else里面执行条件后改变变量为true,返回去继续执行第一条if;

(3)if(){}else if(){}else if(){...........}else{},

可以写多个判断,当所有条件都不成立时,执行最后一个else,最后一个可以写也可以不写,最好把不好满足的写在前面;

二、do-while循环

do{/*语句...*/}while();执行一次之后再判断while的条件语句,比while先执行一次;

js
var i=0; //计数器
do{
    console.log("哈哈");
    i++;
}while(i<10);    //一共循环10次,while括号后一定要加分号;

(1)while循环特点:先判断,后循环,有可能一次循环都不执行;

(2)do-while循环特点:先循环,后判断,至少执行一次循环体;

三、while循环

while循环做不到的,for循环一定做不到;for循环只是把循环到的代码集中在了一个地方;

  1. while(){};括号填写条件,花括号循环体;
  2. 满足条件开始执行,不满足则不执行;根据返回结果的布尔值进行判断
  3. for循环与while循环的区别:while循环不一定要有计数器,只要条件满足则会一直循环;
js
var i=0;
while(i<10){    //这样是循环10次,如果是<=10,则是11次,因为是从0开始的;
    循环体;
    i++;  //记录次数,不能省略,否则一直循环,浏览器就死了;
};
// 也可以这样一条语句
while (i<10) i++

例子1:反复提示用户输入密码

js
//提示用户请输入您的帐号和密码,如果有一个错误了,则提示用户继续的输入帐号和密码
var userPwd = prompt("请您输入您的密码");
var userName = prompt("请您输入您的帐号");
while (userName != "admin" || userPwd!="123" ){
    userPwd = prompt("请您输入您的密码")   // 提示用户输入账号
    userName = prompt("请您输入您的帐号")   // 提示用户输入密码
}
console.log("登录成功");

例子2:转换url的Search部分为对象形式

js
let str = '?id=1&name=hny&age=18'
let reg = /(\w+)=(\w+)/ig    // 不能省略这个g
let o = {}
while(reg.exec(str)){
    o[RegExp.$1] = RegExp.$2
}
console.log(o)  // {id:1,name:hny,age:18}

image

四、for循环

  1. 一件事不停的或者重复去做是循环;
  2. 循环应该有结束的条件,循环还应该有一个计数器(记录循环的次数);
  3. for(声明; 判断; 变化){} (1)小括号填写三个内容:声明变量;结束循环的条件;变量改变,花括号填写循环体;

(2)语法:

  • ①声明
  • ②判断条件是否满足,不满足则跳出,满足执行下一步
  • ③满足则执行循环体
  • ④执行完循环体跳到变化,之后返回②继续如此

(3)每次循环可以在外边声明一个变量,将循环的数据保留下来;var sum=0

  1. for循环中可以使用break或continue打断

continue:跳过当前循环;

break:打断循环;

js
// 第一种写法
for(var i=0;i<10;i++){}

// 第二种写法
var j = 0;
for(;j<10;){
    j++;
}
  1. for循环括号的三个条件都是可选的,如果都不填写,则会是无限循环
js
for(;;) {/*无限循环语句*/}

//只给控制表达式,相当于while循环
for(;i<10;){
    /**/
}
  1. for循环存在极大的灵活性,因此它是最常用的一个循环语句;

例子1:100个偶数相加

js
var sum=0;
for(var i=0;i<=100;i++){
    if(i%2==0){             //奇数相加则
        sum+=i;
    }
}

例子2:循环添加div,并设置不同的样式

js
var arr = ["red","yellow","blue","pink","green","skyblue"];
var sum = "";  // 由于循环里面的条件每次都会走,因此需要在外面声明sum;
for(var i=0;i<6;i++){
    sum += "<li style='background:"+ arr[i] + "'>" + arr[i] + "</li>";
}
  1. 双层for循环

(1)外层的循环和内层的循环变量名不要重复;

(2)外层for循环1次,里面循环完;

(3)第一层循环行数,第二层循环列数;

例子:99乘法表

js
for(var i=1;i<=9;i++){   //循环行数
    for(var j=1;j<=i;j++){   //循环列数
        document.write(j + 'X' + i + '=' + j*i + '&nbsp;');
    }
    document.write('');
}
  1. for循环调试

(1)使用控制台查看for循环的执行变化

(2)在浏览器按f12,打开Sources,点击需要断点的行数,在右侧watch添加需要监听的变量名称,实时查看;

(3)之后按f5刷新,按向下的,图中小圆圈部分,即可以向下执行后面的顺序;

image

(4)f5:跳入方法 f6:向下逐行执行 f7:跳出方法 f8:直接跳转到下一个断点

项目调试一般直接f8,单步就f6

五、for...in.. 循环

  1. 语法:for(var i in 对象){ 循环体 }; 主要是用来循环对象的,因为对象没有长度,没有顺序,所以不能使用for循环;
js
var obj={name:"张三",age:18,city:"北京"};
for(var i in str){
    console.log(i,obj[i])    //取键名和键值;
}
  1. 循环对象时:变量i表示键名,obj[i]表示键值; 在循环时,取字符串需要obj[i]中括号,不能使用点的形式;

  2. 循环数组的时候,变量i表示下标,arr[i]表示数据。

六、label

  1. 使用label语句可以在代码中添加标签,可以在break或continue语句引用。加标签的语句一般都要与for语句等循环语句配合使用
  2. 使用示例:
js
start: for(var i=0;i<10;i++){}
  1. 双层for循环语句示例
js
var num = 0;
// 使用label标签的for语句
start: for(var i=0;i<10;i++){
    console.log(i) // 输出0-5
    for(var j=0;j<10;j++){
        if(i === 5 && j===5) break start;
        num++
    }
}
console.log(num) //55

// 没有使用label标签的for语句
for(var i=0;i<10;i++){
    console.log(i) //输出0-9, 
    for(var j=0;j<10;j++){
        if(i===5 && j===5) break;  //当前break只是打断第二层的循环;
        num++
    }
}
console.log(num)  // 95

六、switch

js
switch(变量){
    case 情况1 : 逻辑 ; break;
    case 情况2 : 逻辑 ; break;
    default: 逻辑 ;
}

判断变量可能有的情况,并执行对应的代码, 当执行成功之后则break打断;

  1. 当case语句表达式时,switch括号中填写true或false,因为每个case值都可以返回一个布尔值,每个case按照顺序被求值,直到找到匹配的值或者遇到default语句为止;
js
var num = 25;
switch(true){
    case num<0: 
        alert('小于0'); break;
    case num >=0 && num <= 10 :
        alert(''); break;
    ...
    default:
        alert()
}
// 因为case的值都会返回一个布尔值;
  1. switch语句在比较值时使用的是全等操作符,因此不会发生类型转换,例如"10",不等于10;

  2. break关键字会跳出当前语句,省略break关键字会导致执行完case语句,继续执行下一个case语句,。

  3. default关键字相当于else语句,所有条件不满足则执行;

  4. switch中的语句也可以是多条语句;

  5. Switch技巧 switch条件过多,可以使用对象字面量代替switch,将所有的switch可能得变量作为键值,内容为键名

image

  1. switch中case过多时,
js
switch(){
    case 1 : ... ; break;
    case 2 :
    // 合并两种情况, 建议带上注释
    case 3 : ... ; break;
}
// 因为没有break条件, 所以会往下走;

七、三目运算符(三元表达式)

  1. 条件 ? 语句1 : 语句2;
  2. 和if(){}else{}用法相同,适用于只有一条语句的时候
  3. 使用 && 直接作为条件判断语句
js
obj.list && obj.list.map()

八、with(了解)

定义with语句主要的目的是简化多次编写同一对象里面的属性;

js
var qs = location.search.substring(1)
var hostName = location.hostname

// 上面代码都包含了location, 使用with语句简化操作:
with(location){
    var qs = search.substring(1)
    var hostName = hostname
}

严格模式下不允许使用with,会报错,由于大量使用with语句会导致性能下降,建议使用with

九、判断简便方法:

  1. 使用对象的方式

js
let obj = {
    'info': function(){}
}
obj['info']()
  1. 使用map
js
let map = new Map([
    ['info', NameModal]
])
ComponentName = map.get('info')
return <ComponentName />

总结

流程控制:代码的执行的过程

  1. 顺序结构:代码的执行顺序,从上到下,从左到右(不严谨);

  2. 判断语句:if,if-else,if-else if,switch-case,三目运算符(三元表达式);

  3. 循环语句:while循环,do-while,for循环,for-in循环;

总结分支:如果只有一个分支,就用if;

如果有两个分支,就用if-else;

如果多个分支,一般是范围的,推荐使用if-else if;

如果多个分支,一般是具体的值,推荐使用switch-case;

总结循环:

while:先判断后循环,有可能一次循环都不执行;

do-while:至少执行一次循环体再判断;

for循环:知道了循环的次数,推荐使用for循环;

调试:是为了找代码的错误和问题所在,才在调试的

断点:不加断点,就不方便调试,

Released under the MIT License.